<template>
    <div id="sumup-card" v-loading="loading"></div>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import {onMounted, ref} from 'vue';
import { useRoute,useRouter } from "vue-router"

const router = useRouter()
const route = useRoute()
const loading = ref(false)

const { pay_on } = route.query

onMounted(()=>{
  loading.value = true
    SumUpCard.mount({
    id: 'sumup-card',
    checkoutId: pay_on,
    onResponse: function (type:any, body:any) {
        if(type === 'success'){
            router.push({path:'/pay-result',query:{tap_id:pay_on}})
        } else if(type === 'error' || type === 'fail'){
          ElMessageBox.alert(`payment error`, {
            confirmButtonText: "OK",
            type: 'warning',
            center: true,
            callback: (action: Action) => {

            }
          })
        }
      console.log('Type', type);
      console.log('Body', body);
    },
      onLoad:function (){
        loading.value = false
      }
  });
})
</script>
<style lang="scss" scoped>
#sumup-card{
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>